<template>
	<view>
		<!-- 博客展示 -->
			<u-gap height="20" bg-color="#ffffff"></u-gap>
			<!-- 头像 昵称 属地 关注 -->
			<view class="class01" >
				<view class="touxiang">
					<view class="u-m-r-10">
						<u-avatar :src=user.userImg size="140"></u-avatar>
					</view>
				</view>
				
				<view class="nichengIP">
					<view class="nicheng">
						<view class="u-font-19 u-p-b-20">{{user.userName}}</view>
					</view>
					<view class="IP">
						<view class="u-font-14 u-tips-color">IP:{{user.city}}</view>
					</view>
				</view>
				
				<view class="guanzhu" >
					<view class="u-m-l-10 u-p-10" >
						<u-button :ripple="true" :type=b_yupe ripple-bg-color="#909399" @click="guanzhu()" v-if="is_myself">{{txt}}</u-button>
					</view>
				</view>
			</view>
			
			<!-- 头像，博客主体之间的分割线 -->	
			<u-line color="#d5d5d5" /> 
			
			<!-- 博客：标题 主体 图片 -->
			<view class="allboke">
				
					<view class="bokeTitle"> 
						<text class="titleText" >{{user.title}}</text>
					</view>
					
					<u-line color="#d5d5d5" /> <!-- 标题与正文分割线 -->
					
					<view class="bokeBody">  <!-- 主题 -->
						<text >{{user.content}}</text>
					</view>
					
				<image :src=user.blogImg class="boke_pic"></image>
			</view>
			
			
			<!-- 博客主体，点赞关注之间的分割线 -->
			<u-line color="#d5d5d5" /> 
			
			<!-- 点赞，评论，收藏 -->
			<u-grid :col="3" clss="dianzan">
				<u-grid-item>
					<image @click="dianzan"  mode="aspectFill" style="width:20px;height: 20px;"
					:src=dianzan_src  ></image>
					<view class="grid-text" >{{user.favornum}}点赞</view>
				</u-grid-item>
				<u-grid-item>
					<image  mode="aspectFill" style="width:20px;height: 20px;"
					src="../../static/评论黑.png"  ></image>
					<view class="grid-text">{{user.commentsnum}}评论</view>
				</u-grid-item>
				<u-grid-item>
					<image @click="shoucang" mode="aspectFill" style="width:20px;height: 20px;"
					:src=shoucang_src ></image>
					<view class="grid-text">{{user.collectnum}}收藏</view>
				</u-grid-item>
			</u-grid>
			
			
			<!-- 评论框 -->
			<view>
				<u-search height="70" placeholder="善语结善缘,恶语伤人心" v-model="keyword" 
				@custom="comment(keyword)" action-text="发布"></u-search>
			</view>
			
			<!-- 评论区 -->
			<view v-for="(item,index) in comments" :key="item.id" >
				<view class="class01">
					<view class="touxiang">
						<view class="u-m-r-10">
							<u-avatar :src=item.image size="140"></u-avatar>
						</view>
					</view>
					
					<view class="nichengIP">
						<view class="nicheng">
							<view class="u-font-19 u-p-b-20">{{item.name}}</view>
						</view>
						<view class="IP">
							<view class="u-font-14 u-tips-color">IP:{{item.city}}</view>
						</view>
					</view>
					<u-line color="#eaeaea" direction="col" />
					<view class="pinglun_class">
						<view class="pinglun_class2">
							
						</view>
						<view class="pinglun_class2 ">
							<text class="u-font-40 u-text-center u-margin-left-50">{{item.text}}</text>
						</view>
						
					</view>
				</view>
				<u-gap height="10" bg-color="#dfdfdf"></u-gap>
			</view>
			<!-- 返回顶部 -->
			<view class="wrap">
				<u-back-top :scroll-top="scrollTop"></u-back-top>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_myself:true, //是否是自己的博客
				scrollTop:1,  //用于返回顶部
				keyword:"",   //评论内容
				myId:getApp().globalData.globalUserid,
				is_dz:false,  //是否已经点赞
				dianzan_src:"../../static/点赞黑.png",  //没点过用黑，点过用红
				
				is_sc:false,  //是否已经收藏
				shoucang_src:"../../static/收藏黑.png", //没点过用黑，点过用红
				
				is_gz:false,  //是否已经关注
				b_yupe:"primary",  //关注按钮的样式，没关注primary，关注了default
				txt:"关注",			//未关注则显示“关注”，已关注则显示“已关注”
				
				user:[			//博客内容
					{
					userId:"",   //用户Id
					blogId:"",   //博客Id
					typeId:"",   //博客类型Id
					title:"", //博客标题
					content:"",         //博客内容
					time:"",   //博客发表时间
					blogImg:"",        //博客图片地址
					favornum:"",     //点赞数 如果没有点赞则返回null
					collectnum:"",   //收藏数 如果没有收藏则返回null
					commentsnum:"",  //评论数 如果没有评论则返回null
					userName:"",     //用户名
					account:"",      //用户账户名
					password:"",    //用户密码
					phone:"",         //用户电话
					age:"",             //用户年龄
					city:"",         //用户所在城市
					sex:"",           //用户性别
					sign:"",        //用户签名
					userImg:"",       //用户头像
					followId:""       ,//被关注者的id
					}
				],  // 声明一个变量用于保存传递过来的值
				comments:[{
					id:1,
					name:"涂某某", //用户昵称
					city:"中国", //ip属地
					image:'../../static/头像1.jpg', //头像路径（就这个路径，数字从0到5）
					text:"hahaha"
				}]
			}
		},
		onPageScroll(e) {   	//用于回到顶部组件获取位置
			this.scrollTop = e.scrollTop;
		},
		onLoad(query) {
//---------------加载全局变量------------------------------------------------------------------------
			this.myId=getApp().globalData.globalUserid;
			console.log("博客展示onLoad的全局userId:"+getApp().globalData.globalUserid);
			if (query) {
				this.user= JSON.parse(decodeURIComponent(query.item));
				this.$u.toast(this.user.blogId);
				
				//判断是不是自己的博客，是就显示关注按钮
				
//------------更新博客数据----------------------------------------------------------------------------
				uni.request({
				url:"http://localhost:9090/showBlogDetail?blogId="+this.user.blogId,
				method:"GET",
				success:(res)=>{
					console.log(res);
						//成功更新博客内容
				 		if(res.data.code*1==200){
							uni.setStorageSync("user",res.data.result);
							console.log("加载博客成功！");
				 		}
				 		
				     //失败code 201，异常
						else{
							this.$u.toast("加载数据异常");
						}
				 	}  
				 });
				}
			if(this.user.userId==this.myId){
				this.is_myself=false;
			}
			
			console.log("首页onLoad的全局userId:"+getApp().globalData.globalUserid)
			//打印
			console.log("首页onLoad的全局city:"+getApp().globalData.globalUsercity);
			console.log("请求评论列表");
//----------查询是否已经关注 ------------------------------------------------------------------------------ 
			uni.request({
			url:"http://localhost:9090/addFollowLogic?userId="+this.myId+"&followId="+this.user.userId,
			method:"GET",
			success:(res)=>{
				console.log(res);
					//成功，code 200,未关注
			 		if(res.data.code*1==200){
						this.is_gz=false;  
						this.txt="关注";
						this.b_yupe="primary";
						
			 		}
					//成功，code 2011,已经关注
			 		
			 		else if(res.data.code*1==2011){
			 			this.is_gz=true;
			 			this.txt="已关注";
			 			this.b_yupe="default";
						
			 		}
			     //失败code 201，异常
					else{
						this.$u.toast("关注数据异常");
					}
			 	}  
			 });
			
//----------查询是否已经点赞----------------------------------------------------------------------------------
			uni.request({
			url:"http://localhost:9090/judgeLike?user_id="+this.myId+"&blog_id="+this.user.blogId,
			method:"GET",
			success:(res)=>{
				console.log(res);
					//成功，code 200,未点赞
			 		if(res.data.code*1==200){
						console.log("未点赞");
						this.is_dz=false;
						this.dianzan_src="../../static/点赞黑.png";

			 		}
					//成功，code 2011,已经点赞
			 		
			 		else if(res.data.code*1==2011){
						console.log("已经点赞");
			 			this.is_dz=true;
			 			this.dianzan_src="../../static/点赞红.png";
			 		}
			     //失败code 201或者400，异常
					else{
						console.log("点赞数据异常");
					}
			 	}  
			 });
			
//----------查询是否已经收藏-------------------------------------------------------------------------------
			uni.request({
			url:"http://localhost:9090/judgeCollect?user_id="+this.myId+"&blog_id="+this.user.blogId,
			method:"GET",
			success:(res)=>{
				console.log(res);
					//成功，code 200,未收藏
			 		if(res.data.code*1==200){
						console.log("未收藏");
						this.is_sc=false;
						this.shoucang_src="../../static/收藏黑.png";
			
			 		}
					//成功，code 2011,已经收藏
			 		
			 		if(res.data.code*1==2011){
						console.log("已经收藏");
			 			this.is_sc=true;
			 			this.shoucang_src="../../static/收藏红.png";
			 		}
			     //失败code 201或者400，异常
					else{
						console.log("收藏数据异常");
					}
			 	}  
			 });
			
			
//----------加载评论列表---------------------------------------------------------------------------------
			uni.request({
			url:"http://localhost:9090/blogComment?blog_id="+this.user.blogId,
			method:"GET",
			success:(res)=>{
				console.log(res);
					//成功，code 200,评论列表
			 		if(res.data.code*1==200){
						uni.setStorageSync("comments",res.data.result);
						this.comments=res.data.result;
			 		}
			 		//失败,code  201
			 		else{
			 			this.$u.toast("加载评论：服务器开小差了，重启一下小程序吧");
			 		}
			 	}  
			 });
		},
		onShow(){
		getApp().globalData.globalUserid;
		console.log("博客展示onShow的全局userId:"+getApp().globalData.globalUserid);
		},
		methods: {
//-------------- 添加评论--------------------------------------------------------------------------------
			comment(keyword){
				this.keyword=keyword;
				if(getApp().globalData.globalUserid==0){
					this.$u.toast("评论失败！请先登录！");
				}
				if(this.keyword==null){
					this.$u.toast("评论内容不能为空！");
				}
				else{
					console.log("发布的评论是："+this.keyword);
					uni.request({
					url:"http://localhost:9090/AddComment?userid="+this.myId+"&blogid="+this.user.blogId+"&commenttxt="+this.keyword,
					method:"GET",
					success:(res)=>{
						console.log(res);
							//成功，code 200,评论成功
					 		if(res.data.code*1==200){
								
								//重新加载评论列表
								uni.request({
								url:"http://localhost:9090/blogComment?blog_id="+this.user.blogId,
								method:"GET",
								success:(res)=>{
									console.log(res);
										//成功，code 200,评论列表
								 		if(res.data.code*1==200){
											uni.setStorageSync("comments",res.data.result);
											this.comments=res.data.result;
											this.$u.toast("评论成功！");
											this.keyword=null; //更新评论表后，清除输入框内容
											this.user.commentsnum=this.user.commentsnum+1;
								 		}
								 		//失败,code  201
								 		else{
								 			this.$u.toast("评论后加载评论：服务器开小差了，重启一下小程序吧");
								 		}
								 	}  
								 });
					
					 		}
					
							//失败code 201或者400，异常
							else{
								console.log("没有登录或者数据异常");
							}
					 	}  
					 });
					 
				}
				
				
			},
//--------------关注取关--------------------------------------------------------------------------------
			guanzhu(){
				console.log("关注");
				if(getApp().globalData.globalUserid==0){
					this.$u.toast("关注失败！请先登录！");
				}
				else if(this.is_gz==false){  //添加关注
					uni.request({
					url:"http://localhost:9090/followOnly?userId="+this.myId+"&followId="+this.user.userId,
					method:"GET",
					success:(res)=>{
						console.log(res);
							//成功，code 200,更新按钮样式
					 		if(res.data.code*1==200){
								this.is_gz=true;
								this.txt="已关注";
								this.b_yupe="default";
								
					 		}
					 		//失败,code  201
					 		else{
					 			this.$u.toast("关注失败，请重试！");
					 		}
					 	}  
					 });
				}
				else{				//取消关注
					uni.request({
					url:"http://localhost:9090/notFollowOnly?userId="+this.myId+"&followId="+this.user.userId,
					method:"GET",
					success:(res)=>{
						console.log(res);
							//成功，code 200,更新按钮样式
					 		if(res.data.code*1==200){
								this.is_gz=false;
								this.txt="关注";
								this.b_yupe="primary";
								
					 		}
					 		//失败,code  201
					 		else{
					 			this.$u.toast("关注失败，请重试！");
					 		}
					 	}  
					 });
				}
			},
//-------------点赞-------------------------------------------------------------------------------------------
			dianzan(){
				console.log("点赞");
				if(getApp().globalData.globalUserid==0){
					this.$u.toast("点赞失败！请先登录！");
				}
				else if(this.is_dz==false){  //添加点赞
					uni.request({
					url:"http://localhost:9090/ClickLike?user_id="+this.myId+"&blog_id="+this.user.blogId,
					method:"GET",
					success:(res)=>{
						console.log(res);
							//点赞成功，code 200,
					 		if(res.data.code*1==200){
								this.is_dz=true;
								this.dianzan_src="../../static/点赞红.png";
								this.user.favornum=this.user.favornum+1;
								
					 		}
							//失败,code  201
							else if(res.data.code*1==201){
								this.$u.toast("点赞失败，请重试！");
							}
					 		
					 		else{
					 			this.$u.toast("点赞数据异常");
					 		}
					 	}  
					 });
				}
				else{				//取消点赞
					uni.request({
					url:"http://localhost:9090/notLike?user_id="+this.myId+"&blog_id="+this.user.blogId,
					method:"GET",
					success:(res)=>{
						console.log(res);
							//点赞成功，code 200,
					 		if(res.data.code*1==200){
								this.is_dz=false;
								this.dianzan_src="../../static/点赞黑.png";
								//更新点赞数据
								this.user.favornum=this.user.favornum-1;
					 		}
							//失败,code  201
							else if(res.data.code*1==201){
								this.$u.toast("取消点赞失败，请重试！");
							}
					 		
					 		else{
					 			this.$u.toast("取消点赞数据异常");
					 		}
					 	}  
					 });
				}
			},
//-----------收藏---------------------------------------------------------------------------------------------
			shoucang(){
				console.log("收藏");
				if(getApp().globalData.globalUserid==0){
					this.$u.toast("收藏失败！请先登录！");
				}
				else if(this.is_sc==false){  //添加收藏
					uni.request({
					url:"http://localhost:9090/ClickCollect?user_id="+this.myId+"&blog_id="+this.user.blogId,
					method:"GET",
					success:(res)=>{
						console.log(res);
							//收藏成功，code 200,
					 		if(res.data.code*1==200){
								this.is_sc=true;
								this.shoucang_src="../../static/收藏红.png";
								this.user.collectnum=this.user.collectnum+1;
								
					 		}
							//失败,code  201
							else if(res.data.code*1==201){
								this.$u.toast("收藏失败，请重试！");
							}
					 		
					 		else{
					 			this.$u.toast("收藏数据异常");
					 		}
					 	}  
					 });
				}
				else{				//取消收藏
					uni.request({
					url:"http://localhost:9090/notCollect?user_id="+this.myId+"&blog_id="+this.user.blogId,
					method:"GET",
					success:(res)=>{
						console.log(res);
							//取消收藏成功，code 200,
					 		if(res.data.code*1==200){
								this.is_sc=false;
								this.shoucang_src="../../static/收藏黑.png";
								this.user.collectnum=this.user.collectnum-1;
					 		}
							//失败,code  201
							else if(res.data.code*1==201){
								this.$u.toast("取消收藏失败，请重试！");
							}
					 		
					 		else{
					 			this.$u.toast("取消收藏数据异常");
					 		}
					 	}  
					 });
				}
			}
			
		}
	}
</script>

<style>
	.mytext{
		color:"#ff0000" ;
		font-size:"24px" ;
		font-weight:"bold" ;
		text-align:"center" ;
		text-decoration:"underline";
	}
	.class01{				//装头像,昵称,IP,关注
		width:100vw;
		height:150rpx;
		background: #ffffff;
		display:flex;
		flex-direction: row;
	}
	.pinglun_class{        //评论,外部大容器
		width:50vw;
		background: #ffffff;
	}
	.pinglun_class2{		//评论,内部小容器
		width:auto;
		height:30rpx;
		background: #ffffff;
	}
	.touxiang{			//装头像
		width:20vw;
		height:150rpx;
		background: #ffffff;
	}
	.nichengIP{			//装昵称IP
		width:20vw;
		height:150rpx;
		background: #ffffff;
	
	}
	.guanzhu{
		width:30vw;
		background: #ffffff;
	}
	.nicheng{		//昵称
		width:20vw;
		height:70rpx;
		background: #ffffff;
	}
	.IP{			//IP
		width:20vw;
		height:50rpx;
		background: #ffffff;
	}
	.bodyText{
		width:100vw;
		height:250rpx;
	}
	.boke{				//装博客 标题 容器的样式
		width:60vw;
		//height:400rpx;
		background: #ffffff;
	} 
	.bokeTitle{		//博客标题
		width:100vw;
		//height:100rpx;
		background: #ffffff;

	}
	.titleText{		//博客标题的样式
		font-size: 20px;
		text-align:"center";
	}
	.bokeBody{		//博客主体
		//height:400rpx;
		width:100vw;
		background: #ffffff;
	
	}
	.allboke{    			//装博客+博客图片的容器样式
		width:100vw;
		background: #ffffff;

		}
	.boke_pic{			//博客图片
		width:100vw;
		background: #ffffff;
	}
	
</style>
